<template>
  <div class="details-bar-top">
    <nav-bar>
      <div slot="left" @click="backClick">
        <img src="~assets/img/common/back.svg" alt="" />
      </div>
      <div class="details-top" slot="center">
        <div
          v-for="(item, index) in titles"
          class="details-item"
          :class="{ active: indexClick == index }"
          @click="thisIndex(index)"
        >
          {{ item }}
        </div>
      </div>
    </nav-bar>
  </div>
</template>

<script>
// 顶tab栏封装
import NavBar from "components/common/navbar/NavBar";

export default {
  data() {
    return {
      // 设置tab栏信息
      titles: ["商品", "参数", "评论", "推荐"],
      // 单击变色，默认第一个
      indexClick: 0,
    };
  },
  components: {
    NavBar,
  },
  methods: {
    // 监听点击，实时获取当前被点击的下标
    thisIndex(index) {
      this.indexClick = index;
      this.$emit('indexIng', index)
    },
    // tab栏左边的退出单击事件
    backClick() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.details-top {
  display: flex;
}

.details-item {
  flex: 1;
}

.active {
  color: red;
}
</style>